<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>用户评论</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style type="text/css">

    /*设置默认样式*/
    *{
      margin: 0;
      padding: 0;
    }
    li{list-style: none;}

    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      text-align: center;
      margin-left: calc(50% - 1.5rem - 4rem);
      color: #fff;
      font-size: 16px;
    }
    /*修改内容区背景色*/
    
    
    /*去掉列表框的线*/
    .list-block ul:before, .list-block ul:after {
      /*background-color: #fff;*/
      display: none;
    }
    
    /*设置列表中li的样式*/
    .list-block .item-content {
/*      padding-right: 0.75rem;
      padding: 0;
      margin: 0 1.5rem;
      border-bottom: 1px dashed #89DAF5;
      z-index: 100;*/
    }

    /*设置列表框中横线*/
    .list-block .item-inner{
      /*border-bottom: 1px dashed #89DAF5;
      z-index: 100;*/
    }

    /*设置列表中显示文字的内边距*/
    /*.list-block .item-media+.item-inner {*/
      /*margin: 0 0.75rem;*/
      /*padding-left: 0.75rem;*/
    /*}*/
    
    .list-block .item-inner:after {
      display: none;
    }
    /*设置page背景色*/
    .page{
      background:#fff;
    }
    

   .menu{
    width: 90%;
    height:2.5rem;
    line-height:2.5rem;
    background-color: #fff;
    border-bottom: 1px solid #ededee;
    position: absolute;
    left: 5%;
    top:2.2rem;
    z-index: 800;
   }

   /*评论内容*/
   #main{
    position: absolute;
    top:4.4rem;
    padding-bottom:5.2rem;
   }
   #li_block{
     width: 100%;
     height: auto;
     float: left;
     margin:3% 0;
     padding-bottom:0.8rem;
   }
   #li_block ul{
     width: 100%;
     float: left;
   }
   #li_block ul li{
    width: 90%;
    height:auto;
    float: left;
    margin:0 5%;
    padding:0.1rem 0 0.3rem;
   }
   .maintop{
    width: 100%;
    height: auto;
    padding:0.5rem 0 0.2rem 0;
    float: left;
   }
   .maintop span{
     display: inline-block;
     width: 48%;
   }
   #title_name{
    float: left;
    text-align: left;
    font-size: 16px;
    font-weight:bolder;
   }
   #title_time{
    float: right;
    text-align: right;
    font-size: 14px;
    color: gray;
   }
   .maindesc{
     width: 100%;
     height: auto;
     padding:0.2rem 0 0.5rem 0.1rem;
     float: left;
   }
   .maindesc p{
    margin:0;
   }
   /*默认样式*/
   #default{
    font-size: 14px;
    color:gray;
    position: absolute;
    top:18%;
    left: 41%;
    display: none;
    z-index: 900;
   }


  /*底部工具栏部分 */
  .foot-title{
    width: 100%;
    height: 2.4rem;
    line-height: 2.4rem;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top:1px solid #ededee;
    background-color: #fff;
  }
  .foot-title input{
    width: 80%;
    padding:2% 6%;
    margin:0 2%;
    background-color:#ededee;
    border:0;
    border-radius:0.8rem;
    font-size: 14px;
  }
  .foot-title span{
    font-size: 16px;
    color: gray;
  }

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">用户评论</span>
      </header>

      <div class="menu"><strong>用户评论</strong></div>
      <!-- 主题内容部分 -->
      <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
          <div class="list-block" id="li_block">
              <ul class="list-container" >
                 
                <!--  <li class="card-content">
                        <div class="maintop">
                          <span id="title_name">刘其新</span>
                          <span id="title_time">2019-01-04</span>
                        </div>
                        <div class="maindesc">
                           <p>这是评论内容</p>
                        </div>
                    </li>  -->
              </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div>
      </div>
      <!-- 暂无评论 -->
      <h4 id="default">暂无评论</h4>
      
       <!-- 底部工具栏 -->
       <footer>
         <div class="foot-title">
           <input type="text" name="" id="commentval" placeholder="评论一下！">
           <span id="send" onclick="sendcomment()">发送</span>
         </div>

       </footer>
                
    </div>
  </div>

  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

   // 加载flag
      var loading = false;
      // 最多可加载的条目
      var offset = 0;
      var limit = 20;
      var lastlength = 20;
      var datalist = new Array();

      // 当前的商品id和type值
      var curgoods_id = "-1";
      var curtype = "-1";


      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;
              console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData(curgoods_id,curtype);
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });
    

   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

   
   // 遍历数据 获取评论接口
   function getData(cid,type){ 
      var param = {}
      //var url = 'api/v1/user_book_comments?search=user_id:'+curuserid+';goods_id:'+cid+';type:'+type+'&searchJoin=and&offset='+offset+'&limit='+limit+'&orderBy=created_at&sortedBy=desc';
      var url = 'api/v1/user_book_comments?search=user_id:'+curuserid+';goods_id:'+curgoods_id+';type:'+curtype+'&searchJoin=and&offset='+offset+'&limit='+limit+'&orderBy=created_at&sortedBy=desc'
      net_request('get',url,param,successCallBack,errorCallBack);
   }

   // 遍历数据 评论接口
   function commentData(){
      var comcontent = $$('#commentval').val();
      var param = {}
      var url = 'apis/commentbook?user_id='+curuserid+'&goods_id='+curgoods_id+'&type='+curtype+'&detail='+comcontent;
      net_request('get',url,param,commentSuccessCallBack,errorCallBack);
   }

   // 成功函数回调 获取评论接口
   function successCallBack(data){
  
      if (isNotNull(data) && data.success) {
        var databody = data.data;
        var html = '';
        if (offset == 0) {
          datalist = new Array();
        }
        if (isNotNull(databody)) {
            
           var html = '';
           lastlength = databody.length;
           for (var i = 0; i < databody.length; i++) {
              var item = databody[i];
              datalist.push(item);
          }

          for (var i = 0; i < datalist.length; i++) {
                var item = datalist[i];

                if (isNotNull(item)) {
                  var username = "";
                  var usercontent = "无";
                  if (isNotNull(item.user)) {
                      username = item.user.name;
                  }
                  if (isNotNull(item.content)) {
                      usercontent = item.content; 
                  }
                  html += '<li class="card-content"><div class="maintop"><span id="title_name">'+username+'</span><span id="title_time">'+item.updated_at+'</span></div><div class="maindesc"><p>'+usercontent+'</p></div></li>';
                }

          }


          $('.infinite-scroll-bottom .list-container').html(html);



        }

        if (lastlength < limit || datalist.length == 0) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
          }
                 
      }
   }  

   function sendcomment(){
    var comcontent = $$('#commentval').val();
           if (!isNotNull(comcontent)) {
              native_showdialog("评论不能为空");
              return;
           }

           // 评论接口
            commentData();
   }

   // 成功函数回调 评论接口
   function commentSuccessCallBack(data){

       if (isNotNull(data) && data.success) {
        $$('#commentval').val("");
           // 重新获取评论
           offset = 0;
           getData(curgoods_id,curtype);
       }

   }


   // 失败函数回调
   function errorCallBack(data){

   }

  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     var jodata = urlParamParseJson(data);
     if(isNotNull(jodata)){//

        curgoods_id = jodata.cid;
        curtype = jodata.type;

        getData(jodata.cid,jodata.type);
     }

  }

  function initview(){

  }
    
    // 初始化
    $(function(){
     initview();
      $.init();
    });
  </script>
</body>
</html>